﻿@model IEnumerable<FingerPrint.WebUI.Models.SalesOrderModel>
@using Kendo.Mvc.UI;
@using System.Globalization;

@{
    ViewBag.Title = "Order";
}

@using (Html.BeginForm())
{


    @(Html.Kendo().Grid(Model)
        .Name("SalesOrder-Grid")

        // --- Data source in Ajax format ---
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(50)
            .Model(model =>
            {
                model.Id(so => so.SalesOrderID);                        //The unique identifier (primary key) of the model is the ProductID property
                model.Field(so => so.SalesOrderID).Editable(false);     // Declare a model field and make it readonly
                model.Field(so => so.EmployeeID).DefaultValue(1);       // Declare a model field and optionally specify its default value (used when a new model instance is created)            
            })
            .Read(read => read.Action("Index", "SalesOrder"))                 // method and controller
            )

        // --- Mapping of ViewModel ---
        .Columns(columns =>
        {
            columns.Bound(so => so.SalesOrderID)
                .Width(50)
                .Template(os => Html.ActionLink("Edit", "Edit", new { id = os.SalesOrderID }, new { }))
                .ClientTemplate("<a href=\"" + "SalesOrder/Edit/" + "#= SalesOrderID #\">#= SalesOrderID #</a>")
                .Title("ID");

            columns.Bound(so => so.SalesOrderNumber)
                .Width(50)
                .Title("Order No.");

            columns.Bound(so => so.ReceivedDate)
                .Width(50)
                .Title("Received Date");

            //columns.Bound(so => so.EmployeeID)
            //    .Width(100);

            columns.Bound(so => so.Employee.EngName)
                .Width(50)
                .Title("Received By")
                .Filterable(false);            


            columns.Bound(so => so.CustomerID)
                .Width(50)
                .Title("Customer ID");

            columns.Bound(so => so.Deadline)
                .Width(50)
                .Title("Deadline");

            columns.Bound(so => so.InvoiceNumber)
                .Width(50)
                .Title("Invoice No.");

            columns.Bound(so => so.Remark)
                .Width(200)
                .Title("Remark");

            columns.Bound(so => so.ModifiedDate)
                .Width(50)
                .Title("Modified Date");

            // Add "Edit" and "Destroy" commands
            //columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

            // Add "customised" command
            //columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));

        })

    // --- Grid buildin features ---
    .Pageable(pageable => pageable.ButtonCount(10))      //  no of buttons below the grid
    .Scrollable(scrollable => scrollable.Height(600))                   //  the height of Grid
    .Sortable(sortable => sortable.AllowUnsort(false))  // 

    //.Filterable()
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
            ))
        ) 

    //.Reorderable(reorder => reorder.Columns(true))
        //.Groupable()
        //.Filterable()

        // Add "Create" command
        //.ToolBar(commands => commands.Create())
        // Set the edit mode to "PopUp"
        //.Editable(editable => editable.Mode(GridEditMode.PopUp))

        // --- CRUD ---
        // Specify the action method and controller name
        //    .Create(create => create.Action("Create", "SalesOrder"))
        //    .Read(read => read.Action("Read", "SalesOrder"))
        //    .Update(update => update.Action("Update", "SalesOrder"))
        //    .Destroy(destroy => destroy.Action("Destroy", "SalesOrder"))
        // --- End of CRUD ---

)

@*<script type="text/javascript">
    $(document).ready(function () {
        $("form.k-edit-form").kendoValidator();
    });
</script>*@



@*Start of pop-up Window for editing*@
@(Html.Kendo().Window().Name("Details") //The name of the window is mandatory. It specifies the "id" attribute of 
    .Title("Customer Details") //set the title of the window
    .Visible(false)     //Show the window after loading
    .Modal(true)        //Disable background after showing the window form
    .Draggable(true)    //Enable dragging of the window
    .Resizable()        //Enable resizing of the window
    .Width(600)         //Set width of the window      
)


    <script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <h2>#= SalesOrderID #</h2>
        <em>#= SalesOrderNumber #</em>
        <dl>
            <dt>City: #= ReceivedDate #</dt>
            <dt>Address: #= ReceivedBy #</dt>
        </dl>
    </div>
    </script>

    <script type="text/javascript">
        //Get the external template definition using a jQuery selector
        var detailsTemplate = kendo.template($("#template").html());

        function showDetails(e) {
            e.preventDefault();

            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#Details").data("kendoWindow");

            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }


        function employeeFilter(element) {
            element.kendoAutoComplete({
                dataSource: {
                    transport: {
                        read: "@Url.Action("FilterMenu_Employee")"
                    }
                }
            });
        }


    </script>
@*End of pop-up window*@

}